<template>
  <!-- 面包屑导航栏 -->
  <div class="hu-bread-nav">
    <i :class="icon" v-if="icon"></i>
    <div :class="{ 'hu-bread-cont': true, 'hu-bread-cont-border': border }">
      <div v-for="(item, index) in nav" :key="item[props.id]">
        <!-- <i v-if="index != 0" class="el-icon-arrow-right" /> -->
        <el-icon v-if="index != 0"><ArrowRight /></el-icon>
        <span style="cursor: pointer" @click="onTitle(item, index)">
          {{
          item[props.text]
          }}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "FGBreadNav",
  props: {
    // 面包屑导航栏
    /**
     * {
     *  text:'',
     *  id:''
     * }
     */
    nav: {
      type: Array,
      default: () => {},
    },
    // 是否存在底边框
    border: {
      type: Boolean,
      default: false,
    },
    props: {
      type: Object,
      default: () => {
        return {
          text: "text",
          id: "id",
        };
      },
    },
    icon: {
      type: String,
      default: "",
    },
  },
  methods: {
    onTitle(item, index) {
      let nav = this.nav || [];
      nav = nav.splice(0, index + 1);
      this.$emit("update:nav", nav);
      this.$emit("onNav", index, item[this.props.id], item);
    },
  },
};
</script>

<style lang="scss" scoped>
.hu-bread-cont {
  display: flex;
  padding: 10px 20px;
  padding-left: 0;
  font-size: 12px;
  overflow-x: auto;
  white-space: nowrap;
}
.hu-bread-cont-border {
  border: 1px solid #ebedf0;
}
.hu-bread-nav {
  position: relative;
  padding: 0 16px;
  padding-left: 36px;
  height: 36px;
  > i {
    position: absolute;
    left: 16px;
    line-height: 36px;
  }
}
</style>
